<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>简易留言板</title>
  <style>
    /* 留言板整体样式 */
    #message-board {
      width: 400px;
      margin: 0 auto;
      border: 1px solid #ccc;
      padding: 20px;
    }

    /* 留言列表样式 */
    #message-list {
      list-style-type: none;
      padding: 0;
    }

    /* 单个留言样式 */
   .message-item {
      border-bottom: 1px solid #ddd;
      padding: 10px 0;
    }

    /* 留言输入框样式 */
    textarea {
      width: 100%;
      height: 100px;
      margin-bottom: 10px;
    }

    /* 提交按钮样式 */
    button {
      background-color: #007BFF;
      color: white;
      border: none;
      padding: 5px 10px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="message-board">
    <h2>留言板</h2>
    <ul id="message-list">
      <!-- 这里将动态添加留言 -->
    </ul>
    <textarea id="message-input" placeholder="请输入留言"></textarea>
    <button id="submit-button">提交留言</button>
  </div>

  <script>
    // 获取提交按钮和留言输入框元素
    const submitButton = document.getElementById('submit-button');
    const messageInput = document.getElementById('message-input');
    const messageList = document.getElementById('message-list');

    // 提交留言的函数
    function submitMessage() {
      const messageText = messageInput.value;
      if (messageText.trim()!== '') {
        // 创建新的留言元素
        const newMessage = document.createElement('li');
        newMessage.className = "message-item";
        newMessage.textContent = messageText;
        // 将新留言添加到留言列表
        messageList.appendChild(newMessage);
        // 清空输入框
        messageInput.value = '';
      }
    }

    // 为提交按钮添加点击事件监听器
    submitButton.addEventListener('click', submitMessage);
  </script>
</body>

</html>